<template>
  <view class="content">
    <view class="section-0">
      <view class="section-body">
        <view class="peoject-name">
          <view class="title">项目名称</view>
          <view class="name">
            <text>{{ project_name }}</text>
            <!-- <view class="iconfont icon-xiangyou1"></view> -->
          </view>
        </view>
        <timeLine :list="list"></timeLine>
      </view>
    </view>
  </view>
</template>

<script>
const riskMap = {
  ticket_name: {
    name: "作业票名称",
    filter: (val) => val,
  },
  ticket_no: {
    name: "作业票编号",
    filter: (val) => val,
  },
  risk_level_after_retest: {
    name: "复测后风险等级",
    filter: (val) => val,
  },
  operation_type: {
    name: "作业类型工序及部位",
    filter: (val) => val,
  },
   actual_start_time: {
    name: "实际开始时间",
  	filter: (val) => val ? val.substring(0, 10) : '-'
  },
     actual_end_time: {
    name: "实际结束时间",
  	filter: (val) => val ? val.substring(0, 10) : '-'
  },
  planned_start_time: {
    name: "计划开始时间",
  	filter: (val) => val ? val.substring(0, 10) : '-'
  },
  planned_end_time: {
    name: "计划结束时间",
    	filter: (val) => val ? val.substring(0, 10) : '-'
  },
  implementation_scheme_name: {
    name: "执行施工方案名称",
    filter: (val) => val,
  },
  construction_personnel_num: {
    name: "施工人数",
    filter: (val) => val,
  },
  detail_work_charge_person: {
    name: "工作负责人",
    filter: (val) => val,
  },

  safety_guardian_person: {
    name: "安全监护人",
   	filter: (val) => val ? val : '-'
  },
  major_risks: {
    name: "主要风险",
    filter: (val) => (val ? val : "-"),
  },
};
// import { ticketChildListApi } from "@/api/statistics.js";
import { JobTicketDetails } from "@/api/statistics.js";
import { addOutageApi, updateOutageApi } from "@/api/outage.js";
import timeLine from "@/components/time_line/index.vue";
export default {
  components: { timeLine },
  data() {
    return {
      project_name: "",
      project_id: "",
	  id:'',
      list: [],
      curd: 0,
      showPop: false,
      form: {},
      type: "add",
      info: {},
      showTime: false,
      timeType: "",
      timeStamp: Number(new Date()),
    };
  },
  methods: {
    confirmTime(val) {
      const timeStamp = val.value;
      this.form[this.timeType] = this.formatDate(timeStamp);
      this.closeShowTime();
    },
    formatDate(timeStamp) {
      const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      const h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      const m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      const s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D;
    },
    handleShowTime(type) {
      this.timeType = type;
      this.showTime = true;
    },
    closeShowTime() {
      this.showTime = false;
    },
    submit() {
      let obj = {};
      if (this.type == "add") {
        obj = {
          project_name: this.info.project_name,
          project_id: this.info.project_id,
          ...this.form,
        };
        this.addOutage(obj);
      } else {
        obj = {
          ...this.info,
          ...this.form,
        };
        this.updateOutage(obj);
      }
    },
    clearForm() {
      for (let key in this.form) {
        this.form[key] = "";
      }
    },
    handleShowPop(type) {
      this.clearForm();
      if (type == "update") {
        this.form = JSON.parse(JSON.stringify(this.info));
      }
      this.type = type;
      this.showPop = true;
    },
    closePop() {
      this.showPop = false;
    },

    async fetchData() {
      uni.showLoading({
        title: "加载中...",
      });
      const { data } = await JobTicketDetails({
        id: this.id,
      });
	  console.log(data,'回参')
      uni.hideLoading();
      if (data.code === 1) {
        let arr = [];
        let res = data.data;
        for (let key in res) {
          let item = {};
          if (riskMap[key]) {
            item = {
              title: riskMap[key].name,
              content: {
                type: "text",
                value: riskMap[key].filter(res[key]),
              },
            };
            arr.push(item);
          }
        }
        this.info = res;
        this.list = arr;
      }
    },
  },
  onLoad(data) {
    var obj = JSON.parse(data.params);
    this.project_id = obj.project_id;
    this.project_name = obj.project_name;
	this.id=obj.id
  },
  onReady() {
    this.fetchData();
  },
};
</script>

<style lang="scss" scoped>
.pop-custom-button-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.pop {
  width: 671rpx;
  padding-bottom: 40rpx;
  background-color: #fff;
  border-radius: 35rpx;
  overflow: hidden;

  .title {
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
    background-color: #1534ce;
    font-size: 42rpx;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 4rpx;
    color: #ffffff;
    text-align: center;
  }

  .body {
    .section-pop {
      width: 100%;
      height: calc(100vh - 450rpx);
      border-radius: 50rpx;
      background-color: #fafbfd;
      padding-top: 50rpx;
      padding-bottom: 20rpx;
      box-shadow: 0rpx -10rpx 29rpx 8rpx rgba(#bcbcb5, 0.19);
      position: relative;
      top: 0;
    }
    .form-item {
      width: 600rpx;

      line-height: 48rpx;
      margin: 0 auto;
      margin-bottom: 25rpx;
      display: flex;
      align-items: center;

      &:last-child {
        margin-bottom: 34rpx;
      }

      &.upload-wrap {
        align-items: unset;
        height: unset;
        line-height: unset;
      }

      @include clear();

      .label {
        float: left;
        width: 130rpx;
        height: 48rpx;
        text-align: left;
        line-height: 44rpx;
        font-size: 26rpx;
        color: #46464a;
      }

      /deep/ .u-upload__wrap {
        // width: calc(100% - 206rpx) !important;
        width: calc(100%) !important;
        background-color: transparent;
      }

      .icon-tupian {
        position: absolute;
        right: 25rpx;
        line-height: 44rpx;
        color: #1534ce;
        font-size: 28rpx;
      }

      /deep/ .u-radio-label--left {
        margin-right: 55rpx;
      }

      /deep/ .u-radio__text {
        font-size: 26rpx !important;
        color: #46464a !important;
      }

      .input {
        float: left;
        width: calc(100% - 134rpx - 3rpx);
        border-radius: 20rpx;
        border: solid 2rpx #1534ce;

        .input-body {
          box-sizing: border-box;
          width: 100%;
          height: 44rpx;
          padding: 0 !important;
          border: none;
          padding-left: 30rpx !important;
          padding-right: 30rpx !important;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.8);
          line-height: 44rpx;
          /deep/ .uni-input-input {
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: rgba(0, 0, 0, 0.8);
          }
        }
        .text-body {
          box-sizing: border-box;
          width: 100%;
          padding: 0 !important;
          border: none;
          padding-left: 30rpx !important;
          padding-right: 30rpx !important;
          padding-top: 15rpx;
          padding-bottom: 15rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.8);
          line-height: 30rpx;
          border-radius: 20rpx;
          /deep/ .uni-textarea-textarea {
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: rgba(0, 0, 0, 0.8);
          }
        }

        .input-placeholder {
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
}

.content {
  background-color: #fff;
}
.custom-button-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 40rpx;
  position: fixed;
  bottom: 30rpx;
  z-index: 99;
  .custom-button {
    width: 250rpx;
    box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
  }
}
.section-0 {
  width: 100%;
  background-color: #3a5df5;
  .section-body {
    padding-top: 50rpx;
    .peoject-name {
      margin-bottom: 65rpx;
      width: 100%;
      height: 158rpx;
      background-color: #ffffff;
      border-radius: 35rpx;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      .title {
        width: 533rpx;
        height: 50rpx;
        padding-top: 15rpx;
        line-height: 50rpx;
        border-bottom: solid 3rpx #f2f2f0;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #8497ac;
        margin-left: 35rpx;
      }
      .name {
        box-sizing: border-box;
        padding: 0 35rpx;
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #46464a;
        .iconfont {
          float: right;
          font-size: 30rpx;
          color: #3b3c40;
        }
      }
    }
    box-sizing: border-box;
    width: 100%;
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-bottom: 100rpx;
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
  }
}
</style>
